<template>
  <el-row :gutter="20" :style="{ marginTop: showWorkTab ? '0' : '10px' }" class="card-list">
    <el-col v-for="(item, index) in dataList" :key="index" :sm="12" :md="6" :lg="6">
      <div class="card art-custom-card">
        <span class="des subtitle">{{ item.des }}</span>
        <!-- <CountTo class="number box-title" :endVal="item.num" :duration="1000" separator=""></CountTo> -->
        <div class="number box-title">{{ item.num }}</div>
        <div class="change-box">
          <span class="change-text">{{ item.remark }}</span>
          <span class="change text-success">
            {{ item.change }}
          </span>
        </div>
        <i class="iconfont-sys" v-html="item.icon"></i>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/store/modules/setting'
import { homePageInfo } from '@/api/homeApi'

const { showWorkTab } = storeToRefs(useSettingStore())

const staticData = ref<any>({})
const homeLoading = ref(false)

const getHomePageData = async () => {
  try {
    homeLoading.value = true
    const res = await homePageInfo()
    if (res.code === '00000') {
      staticData.value = res.data
    }
  } catch {

  } finally {
    homeLoading.value = false
  }
}

onMounted(() => {
  getHomePageData()
})

const dataList = computed(() => [
  {
    des: '今日浏览量（PA）',
    icon: '&#xe721;',
    startVal: 0,
    duration: 1000,
    num: staticData.value && staticData.value.topData ? Number(staticData.value.topData.todayPageView) : 0,
    change: staticData.value && staticData.value.topData ? Number(staticData.value.topData.todayAddMember) : 0,
    remark: '今日新增用户'
  },
  {
    des: '今日访客数（UA）',
    icon: '&#xe724;',
    startVal: 0,
    duration: 1000,
    num: staticData.value && staticData.value.topData ? Number(staticData.value.topData.todayPagevisit) : 0,
    change: staticData.value && staticData.value.memberRecordData ? Number(staticData.value.memberRecordData.todayAddMemberRecord) : 0,
    remark: '今日新增学员'
  },
  {
    des: '今日营业额（元）',
    icon: '&#xe7aa;',
    startVal: 0,
    duration: 1000,
    num: staticData.value && staticData.value.topData ? Number(staticData.value.topData.todayOrderAmount).toFixed(2) : '0.00',
    change: staticData.value && staticData.value.topData ? Number(staticData.value.topData.todayOrderCount) : 0,
    remark: '今日订单数（单）'
  },
  {
    des: '题库总数（道）',
    icon: '&#xe82a;',
    startVal: 0,
    duration: 1000,
    num: staticData.value && staticData.value.topData ? staticData.value.topData.questionTotal : 0,
    change: staticData.value && staticData.value.topData ? staticData.value.topData.selfQuestionTotal : 0,
    remark: '自建题库数（道）'
  }
])
</script>

<style lang="scss" scoped>
.card-list {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  background-color: transparent !important;

  .art-custom-card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 140px;
    padding: 0 18px;
    list-style: none;
    transition: all 0.3s ease;

    $icon-size: 52px;

    .iconfont-sys {
      position: absolute;
      top: 0;
      right: 20px;
      bottom: 0;
      width: $icon-size;
      height: $icon-size;
      margin: auto;
      overflow: hidden;
      font-size: 22px;
      line-height: $icon-size;
      color: var(--el-color-primary) !important;
      text-align: center;
      background-color: var(--el-color-primary-light-9);
      border-radius: 12px;
    }

    .des {
      display: block;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
    }

    .number {
      display: block;
      margin-top: 10px;
      font-size: 28px;
      font-weight: 400;
    }

    .change-box {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .change-text {
        display: block;
        font-size: 13px;
        color: var(--art-text-gray-600);
      }

      .change {
        display: block;
        margin-left: 5px;
        font-size: 13px;
        font-weight: bold;

        &.text-success {
          color: var(--el-color-success);
        }

        &.text-danger {
          color: var(--el-color-danger);
        }
      }
    }
  }
}

.dark {
  .card-list {
    .art-custom-card {
      .iconfont-sys {
        background-color: #232323 !important;
      }
    }
  }
}
</style>
